import { useState } from "react";
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import Tabs from "components/Tabs";

<Meta title="Components/Tabs" component={Tabs} />

# Tabs

## Props

<Props of={Tabs} />

## Examples

### Basic

Basic usages for `Tabs` component.

<Preview>
  <Story name="basic tabs">
    {() => {
      const [tab, setTab] = useState("xxx");
      const { TabPanel } = Tabs;
      return (
        <>
          <Tabs activeName={tab} onChange={(newTab) => setTab(newTab)}>
            <TabPanel label="xxx" name="xxx" icon="cluster">
              xxx
            </TabPanel>
            <TabPanel label="yyy" name="yyy" icon="project">
              yyy
            </TabPanel>
          </Tabs>
          <Tabs
            type="button"
            activeName={tab}
            onChange={(newTab) => setTab(newTab)}
          >
            <TabPanel label="xxx" name="xxx">
              xxx
            </TabPanel>
            <TabPanel label="yyy" name="yyy">
              yyy
            </TabPanel>
          </Tabs>
          <Tabs
            direction="vertical"
            activeName={tab}
            onChange={(newTab) => setTab(newTab)}
          >
            <TabPanel label="xxx" name="xxx">
              xxx<br/>
              xxx<br/>
              xxx<br/>
              xxx<br/>
              xxx<br/>
              xxx<br/>
              xxx<br/>
              xxx<br/>
              xxx<br/>
              xxx<br/>
              xxx<br/>
              xxx<br/>
              xxx<br/>
            </TabPanel>
            <TabPanel label="yyy" name="yyy">
              yyy
            </TabPanel>
          </Tabs>
        </>
      );
    }}
  </Story>
</Preview>
